<template>
    <div class="setting">
        <div class="setting_contentbox">
            <div v-if="$root.username===''">
                <van-cell is-link icon="https://b.yzcdn.cn/vant/icon-demo-1126.png" @click="showPopup2">登录</van-cell>
            </div>
            <div v-else>
                <van-cell :title="$root.userid" size="large" :label="$root.username" >
                    <van-image round width="50"  height="50" :src="$root.imgurl">
                    </van-image>
                </van-cell>
            </div>
            <br />
            <router-link to="/likepage">
            <van-cell is-link @click="showPopup">我的收藏夹</van-cell>
            </router-link>
            <br />
            <van-cell is-link @click="showPopup">我的消息</van-cell>
            <br />
            <van-cell is-link @click="uploadpic">上传头像</van-cell>
            <br />
            <van-cell is-link @click="showme">关于</van-cell>
            <br />
            <van-cell is-link @click="showPopup">注册用户</van-cell>
            <br />
            <van-row>
                <van-col offset="9" span="6">
                    <van-button plain type="info" @click="exitlogin">退出登录</van-button>
                </van-col>
            </van-row>


            <van-dialog v-model="showpic" title="上传头像" @confirm="subimg"  show-cancel-button >
                <van-uploader :after-read="afterRead(fileList[0])" v-model="fileList" multiple :max-count="1" class="imgpage"/>
            </van-dialog>
            <van-dialog v-model="show" title="注册用户" @confirm="onSubmit" show-cancel-button>
                <van-field
                    v-model="username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="userid"
                    name="名称"
                    label="名称"
                    placeholder="名称"
                    :rules="[{ required: true, message: '请填写名称' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <van-field
                    v-model="confirmpassword"
                    type="password"
                    name="确认密码"
                    label="确认密码"
                    placeholder="确认密码"
                    :rules="[{ required: true, message: '请确认密码' }]"
                />
            </van-dialog>
            <van-dialog v-model="showlogin" title="登录" @confirm="login" show-cancel-button>
                <van-field
                    v-model="loginusername"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="loginpassword"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
            </van-dialog>
            <!-- <van-popup v-model="show">内容</van-popup> -->
        </div>
        <bottomBar />
    </div>
</template>
<script>
import bottomBar from '../components/bottomBar.vue'

const axios = require('axios');
export default {
    components: {
        bottomBar,
    },
    data() {
        return {
            show: false,
            showlogin: false,
            showpic:false,
            loginusername:'',
            loginpassword:'',
            username: '',
            password: '',
            confirmpassword:'',
            userid:'',
            datas:[],
            fileList:[]
        };
    },

    methods: {
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file);
            },
        subimg(){
            axios({
                method:"patch",
                url:"http://localhost:3000/user/"+this.$root.userid2,
                data:{
                    "imgurl":this.fileList[0].content,
                    }
                }).then((data)=>{
                    console.log(data);
                })
                this.$toast.success('已收藏');
            },
        showme(){
            this.$dialog.alert({
            message: '开发者：计算1801朱政旭31801085',
            }).then(() => {
            // on close
            });
        },
        getdata(){
            this.$axios.get("http://localhost:3000/user/")
                .then(res =>{
                    // console.log(res.data)
                this.datas=res.data
                console.log(this.datas)
            })
        },
        login(){
            console.log(this.loginusername)
            console.log(this.loginpassword)
            console.log(this.datas.length)
            console.log(this.$root.username)
            for(var i=0;i<this.datas.length;i++){
                if((this.loginusername == this.datas[i].username )&&(this.loginpassword == this.datas[i].password)){
                    this.$root.username= this.datas[i].username
                    this.$root.loginpassword= this.datas[i].loginpassword
                    this.$root.imgurl=this.datas[i].imgurl
                    this.$root.userid= this.datas[i].userid
                    this.$root.like1=this.datas[i].like1
                    this.$root.like2=this.datas[i].like2
                    this.$root.like3=this.datas[i].like3
                    this.$root.userid2=this.datas[i].id
                    this.$toast.success('登录成功');
                    console.log(this.$root.imgurl);
                }
            }
        },
        showlikepage(){

        },
        exitlogin(){
            this.$root.username=""
            this.$root.loginpassword=""
            this.$root.userid=""
            this.$root.imgurl=""
            this.$root.like1=[]
            this.$root.like2=[]
            this.$root.like3=[]
            this.$toast.success('账号已退出');
        },
        onSubmit() {
            console.log(this.password)
            console.log(this.username);
            if(this.password == this.confirmpassword){
                axios({
                method:"post",
                url:"http://localhost:3000/user",
                data:{
                    "password":this.password,
                    "username":this.username,
                    "userid":this.userid,
                    "imgurl":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fc5440470619c6048395d6ebeff4212025414266a29a0-dIo4KG_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627113042&t=d3a3350b123022c379a20fb04c29239e",
                    "like1":[],
                    "like2":[],
                    "like3":[],
                    }
                }).then((data)=>{
                    console.log(data);
                })
                this.$toast.success('注册成功');
            }
            else{
                this.$toast.fail('两次输入密码不一致');
            }
        },
        showPopup() {
            this.show = true;
        },
        showPopup2() {
            this.showlogin = true;
        },
        uploadpic() {
            this.showpic = true;
        },
        test(){
            axios({
                method:"post",
                url:"http://localhost:3000/comment",
                data:{
                    "channel":"找中药",
                    "name":"小赵",
                    "imgurl":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdp.gtimg.cn%2Fdiscuzpic%2F0%2Fdiscuz_x5_gamebbs_qq_com_forum_201306_19_1256219xc797y90heepdbh.jpg%2F0&refer=http%3A%2F%2Fdp.gtimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627030725&t=7ea6e9d938425a5c6e43da552efd576f",
                    "date":"2021-6-22",
                    "info":"山茱萸炮制方法与标准",
                    "comment":[
                        {
                        "id":1,
                        "commentname":"李四",
                        "commentinfo":"你好"
                        }
                    ]
                    }
            }).then((data)=>{
                console.log(data);
            })
        }
    },
    mounted(){
        this.getdata()
        console.log(this.$root.username)
    }
    
}
</script>

<style scoped>
.setting{
    height: 18rem;
    background-color: #F2F3F5;
}
.imgpage{
    margin-left: 36%;
}
</style>